import React, {Component , useState } from 'react';
import axios from 'axios';
import {SERACH_EMPLOYEE,SEARCH_MERCHANT,ADD_EMPLOEE} from '../../utils/api'
import './css/Yuangongguanli.css'
import { Input ,Button, Form,Tooltip , Table, Space ,Switch, TreeSelect ,Modal ,Radio ,Popconfirm, message} from 'antd';
import { SearchOutlined ,AppstoreOutlined  ,PlusCircleOutlined  ,DeleteOutlined } from '@ant-design/icons';

const { TreeNode } = TreeSelect;
// 引入表单的
const layout = {
    labelCol: { span: 8 },
    wrapperCol: { span: 16 },
};
const tailLayout = {
    wrapperCol: { offset: 8, span: 16 },
};
const onFinish = values => {
    console.log('Success:', values);
    console.log(111)
};
const onFinishFailed = errorInfo => {
    console.log('Failed:', errorInfo);
    console.log(222)
};
class Yuangongguanli extends Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            Modalvisible:false,
            tableData:'',
            switchData:'',
            merchant_id:'',
            merchanr_name:'',
            merchantData:'',
            selectedValue:'',
            value:'',
            setValue:''
        };
    };
    // 对话框的确认的按钮
    handleOk = () => {
        console.log(1)
        this.setState({
            visible: false,
        });
    };
    // 对话框的取消按钮以及点击右上角叉的按钮
    handleCancel = () => {
        console.log(2)
        this.setState({
            visible: false,
        });
    };
    confirm=(e)=> {
        console.log(e);
        message.success('点击了是');
    }
     cancel=(e)=> {
        console.log(e);
        message.error('点击了否');
    };
    // 查询所有商家信息并且渲染在下拉菜单
    getMerchantData(){
        axios({
            url:SEARCH_MERCHANT,
            method:'get',
            params: {}
        }).then(data=>{
            console.log(data)
            let treeNode=[];
            data.data.data.map((ele,index)=>{
                treeNode.push(ele.merchanr_name)
            })
            this.setState({
                merchantData:treeNode,
            })
        })

    }
    // 绑定树选择的值
    treeSelect=(value)=>{
        console.log(value)
        this.setState({
            selectedValue:value
        })
    }
    // 根据店铺当前店铺查询所有员工
    componentDidMount(){
        this.getMerchantData()
    }
    // 点击开关
    switchBtn= () => () =>{
        this.setState({
        })
    }

    // 根据店铺id查询员工
    searchEmployee=()=>{
        console.log('这是查询的按钮')
        axios({
            url:SERACH_EMPLOYEE,
            method:'get',
            params:{
                merchant_id:this.state.merchant_id
            }
        }).then(data=>{
            console.log(data)
            if (this.mounted){
                this.setState({
                    tableData:data.data.data
                })
            }
        })
    }
    // 获取输入框的值
    searchContent=(name)=>(e)=>{
        console.log(e)
        this.shuru(name,e.target.value)
    }
    shuru=(name,val)=>{
        this.setState({
            [name]:val
        })
}
    // 点击添加的按钮
    addEmployee=()=>{
        this.setState({
            visible:true
        })
        console.log('这是添加的按钮')
    }
    onChange = e => {
        console.log('radio checked', e.target.value);
        this.state.setValue(e.target.value);
    };
    // 修改员工信息的按钮
    updateEmployee=()=>{
        this.setState({
            // Modalvisible:true
        })
        console.log('这是修改的按钮')
    }
    // 删除员工的按钮
    deleteEmployee=()=>{
        this.setState({
            Modalvisible:true
        })
        console.log('这是删除员工的按钮')
    }

    render() {
        const columns = [
            {
                title: '姓名',
                dataIndex: 'user_name',
                key: 'user_name',
            },
            {
                title: '性别',
                dataIndex: 'user_sex',
                key: 'user_sex',
            },
            {
                title: '电话',
                dataIndex: 'user_iphone',
                key: 'user_iphone',
            },
            {
                title: '邮箱',
                dataIndex: 'user_email',
                key: 'user_email',
            },
            {
                title: '入职时间',
                dataIndex: 'user_join_date',
                key: 'user_join_date',
            },
            {
                title: '角色',
                dataIndex: 'role_name',
                key: 'role_name',
            },
            {
                title: '状态',
                dataIndex: 'user_status_name',
                key: 'user_status_name',
                render:()=>(
                    <Space size='middle'>
                        <Switch checkedChildren="启用" unCheckedChildren="禁用" defaultChecked={this.state.switchData}  onChange={this.switchBtn} />
                    </Space>
                )
            },
            {
                title: '操作',
                key: 'action',
                render: () => (
                    <Space size="middle">
                        <Button onClick={this.updateEmployee}  type="danger" color={'black'} icon={<AppstoreOutlined />}>修改</Button>
                        <Button onClick={this.deleteEmployee}  type="danger" icon={<DeleteOutlined />}>删除</Button>
                    </Space>
                ),
            },
        ];
        // 下拉菜单的数据
        let mydata = ''
        if (this.state.merchantData){
            mydata = this.state.merchantData.map((item,i)=>{
                return <TreeNode value={item} title={item} key={item} />
            })
        }else{
            mydata = <TreeNode value="1212" title="没有数据，请重试！" />
        }
        return (
            <div>
                <div className='searchInput'>
                    <Input placeholder="请输入查询的员工角色名" onChange={this.searchContent('merchant_id')} value={this.state.merchant_id} />
                    <TreeSelect
                        showSearch
                        style={{ width: '200px' }}
                        value={this.state.selectedValue}
                        dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
                        placeholder="请选择店铺名称"
                        allowClear
                        treeDefaultExpandAll
                        onChange={this.treeSelect}
                    >
                        {mydata}
                    </TreeSelect>
                    <div className='myBtn'>
                        <Tooltip title="查询">
                            <Button type="primary" onClick={this.searchEmployee} shape="circle" icon={<SearchOutlined />} />
                        </Tooltip>
                        <Tooltip title="添加">
                            <Button type="primary" onClick={this.addEmployee} className='addBtn' shape="circle" icon={<PlusCircleOutlined />} />
                        </Tooltip>
                        <Modal
                            title="添加员工信息"
                            visible={this.state.visible}
                            onOk={this.handleOk}
                            onCancel={this.handleCancel}
                        >
                            <Form
                                {...layout}
                                name="添加员工信息"
                                initialValues={{ remember: true }}
                                onFinish={onFinish}
                                onFinishFailed={onFinishFailed}
                            >
                                <Form.Item
                                    label="员工姓名"
                                    name="user_name"
                                    rules={[{ required: true, message: '请输入员工姓名！' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="员工性别"
                                    name="user_sex"
                                    rules={[{ required: true, message: '请输入员工性别！' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="员工年龄"
                                    name="user_age"
                                    rules={[{ required: true, message: '请输入员工年龄！' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="员工邮箱"
                                    name="user_email"
                                    rules={[{ required: true, message: '请输入员工邮箱！' }]}
                                >
                                    <Input />
                                </Form.Item>
                                <Form.Item
                                    label="员工手机"
                                    name="user_iphone"
                                    rules={[{ required: true, message: '请输入员工手机号！' }]}
                                >
                                    <Input />
                                </Form.Item>

                                <Form.Item  className='selectRole'
                                    label="角色"
                                    name="role_id"
                                    rules={[{ required: true, message: '请选择员工的角色' }]}
                                >
                                    <Radio.Group onChange={this.onChange} value={this.state.value} className='myRadio'>
                                    <Radio value={1}>客服</Radio>
                                    <Radio value={2}>运营</Radio>
                                     </Radio.Group>
                                </Form.Item>
                                <Form.Item className='selectRole'
                                    label="状态"
                                    name="user_status_id"
                                    rules={[{ required: true, message: '请选择员工状态！' }]}
                                >
                                    <Radio.Group onChange={this.onChange} value={this.state.value} className='myRadio'>
                                        <Radio value={1}>启用</Radio>
                                        <Radio value={2}>禁用</Radio>
                                    </Radio.Group>
                                </Form.Item>
                                <Form.Item {...tailLayout} className='save'>
                                    <Button type="primary"  className='save'>
                                        确认
                                    </Button>
                                    <Button type="danger"  className='noSave'>
                                        取消
                                    </Button>
                                </Form.Item>
                            </Form>
                        </Modal>
                    </div>
                </div>
                <Table columns={columns} dataSource={this.state.tableData}  rowKey={(record)=>`complete${record.user_id}`}/>
                <Popconfirm
                    title="确定删除此员工嘛？"
                    onConfirm={this.confirm}
                    onCancel={this.cancel}
                    okText="确定"
                    cancelText="取消"
                    visible={this.state.Modalvisible}
                >
                </Popconfirm>,
            </div>
        );
    }
}

export default Yuangongguanli;